<template>
  <div class="admin-dashboard">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark admin-navbar">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <i class="fas fa-cogs me-2"></i>
          SHOPLOOK 管理后台
        </a>

        <div class="navbar-nav ms-auto">
          <div class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              role="button"
              :class="{ show: showUserDropdown }"
              @click.prevent="toggleUserDropdown"
            >
              <i class="fas fa-user-circle me-1"></i>
              {{ userStore.userInfo?.name || '管理员' }}
            </a>
            <ul class="dropdown-menu" :class="{ show: showUserDropdown }">
              <li><a class="dropdown-item" href="#" @click.prevent="logout">退出登录</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="admin-content">
      <div class="container-fluid">
        <div class="row g-0">
          <!-- 左侧菜单 -->
          <div class="col-md-2 col-lg-2 col-xl-2 d-md-block sidebar">
            <div class="position-sticky pt-3">
              <ul class="nav flex-column">
                <li class="nav-item">
                  <router-link
                    class="nav-link"
                    :class="{ active: $route.name === 'admin-analytics' }"
                    to="/admin/analytics"
                  >
                    <i class="fas fa-chart-bar me-2"></i>
                    <span class="nav-text">数据分析</span>
                  </router-link>
                </li>
                <li class="nav-item">
                  <router-link
                    class="nav-link"
                    :class="{ active: $route.name === 'admin-users' }"
                    to="/admin/users"
                  >
                    <i class="fas fa-users me-2"></i>
                    <span class="nav-text">用户管理</span>
                  </router-link>
                </li>
                <li class="nav-item">
                  <router-link
                    class="nav-link"
                    :class="{ active: $route.name === 'admin-products' }"
                    to="/admin/products"
                  >
                    <i class="fas fa-box me-2"></i>
                    <span class="nav-text">商品管理</span>
                  </router-link>
                </li>
                <li class="nav-item">
                  <router-link
                    class="nav-link"
                    :class="{ active: $route.name === 'admin-orders' }"
                    to="/admin/orders"
                  >
                    <i class="fas fa-shopping-bag me-2"></i>
                    <span class="nav-text">订单管理</span>
                  </router-link>
                </li>
                <li class="nav-item">
                  <router-link
                    class="nav-link"
                    :class="{ active: $route.name === 'admin-brands' }"
                    to="/admin/brands"
                  >
                    <i class="fas fa-tags me-2"></i>
                    <span class="nav-text">品牌管理</span>
                  </router-link>
                </li>
                <li class="nav-item">
                  <router-link
                    class="nav-link"
                    :class="{ active: $route.name === 'admin-categories' }"
                    to="/admin/categories"
                  >
                    <i class="fas fa-sitemap me-2"></i>
                    <span class="nav-text">分类管理</span>
                  </router-link>
                </li>
                <li class="nav-item">
                  <router-link
                    class="nav-link"
                    :class="{ active: $route.name === 'admin-notifications' }"
                    to="/admin/notifications"
                  >
                    <i class="fas fa-bell me-2"></i>
                    <span class="nav-text">通知管理</span>
                  </router-link>
                </li>
              </ul>

              <hr class="my-3">

              <ul class="nav flex-column">
                <li class="nav-item">
                  <router-link class="nav-link text-muted" to="/">
                    <i class="fas fa-home me-2"></i>
                    返回前台
                  </router-link>
                </li>
              </ul>
            </div>
          </div>

          <!-- 右侧内容区域 -->
          <main class="col-md-10 col-lg-10 col-xl-10 px-md-3">
            <!-- 路由视图 -->
            <router-view />
          </main>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { Message } from '@/utils/message'

const router = useRouter()
const userStore = useUserStore()

// 用户下拉菜单状态
const showUserDropdown = ref(false)


// 切换用户下拉菜单
const toggleUserDropdown = () => {
  showUserDropdown.value = !showUserDropdown.value
}

// 退出登录
const logout = async () => {
  try {
    await userStore.logout()
    Message.success('已退出登录')
    router.push('/login')
  } catch (error) {
    console.error('退出登录失败:', error)
    Message.error('退出登录失败')
  }
  showUserDropdown.value = false // 关闭下拉菜单
}

// 页面点击事件处理
const handleDocumentClick = (event: Event) => {
  const target = event.target as HTMLElement
  if (!target.closest('.dropdown')) {
    showUserDropdown.value = false
  }
}

// 组件挂载和销毁时的事件监听
onMounted(() => {
  document.addEventListener('click', handleDocumentClick)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleDocumentClick)
})
</script>

<style scoped>
.admin-dashboard {
  min-height: 100vh;
}

/* 确保导航栏始终在最上层 */
.admin-navbar {
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 用户下拉菜单样式 */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
  min-width: 180px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: slideDown 0.2s ease-out;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  clear: both;
  font-weight: 400;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #007bff;
}

.dropdown-divider {
  height: 0;
  margin: 4px 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.sidebar {
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
  min-height: calc(100vh - 56px);
  padding: 0;
  position: sticky;
  top: 56px;
  z-index: 10;
}

.sidebar .nav-link {
  color: #495057;
  border-radius: 6px;
  margin-bottom: 2px;
  padding: 8px 12px;
  font-size: 14px;
}

.sidebar .nav-link:hover {
  background-color: #e9ecef;
  color: #007bff;
}

.sidebar .nav-link.active {
  background-color: #007bff;
  color: white;
}

.admin-content {
  background-color: #f8f9fa;
  min-height: calc(100vh - 56px);
}

.admin-content .row {
  margin: 0;
  min-height: calc(100vh - 56px);
  display: flex;
  flex-wrap: nowrap;
}


main {
  background-color: white;
  min-height: calc(100vh - 56px);
  padding: 15px;
  flex: 1;
  overflow-x: auto;
  position: relative;
  z-index: auto;
}

/* 移动端响应式 */
@media (max-width: 767.98px) {
  .admin-content .row {
    flex-wrap: wrap;
  }

  .sidebar {
    position: fixed;
    top: 56px;
    left: -100%;
    width: 80%;
    height: calc(100vh - 56px);
    z-index: 1020;
    transition: left 0.3s ease;
  }

  .sidebar.show {
    left: 0;
  }

  main {
    width: 100%;
    margin-left: 0;
  }
}

/* 桌面端确保左右布局 */
@media (min-width: 768px) {
  .admin-content .row {
    display: flex;
    flex-wrap: nowrap;
  }

  .sidebar {
    flex-shrink: 0;
  }

  main {
    flex: 1;
    min-width: 0;
  }
}
</style> 